<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="icon" href="../vendor/img/reset1.png" type="image/x-icon"/>
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../vendor/jquery/jquery-1.11.3.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <!--validationEngine验证-->
    <link rel="stylesheet" type="text/css" href="../vendor/jquery/formvalidator/css/validationEngine.jquery.css">
    <script type="text/javascript" src="../vendor/jquery/formvalidator/js/jquery.validationEngine.js"></script>
    <script type="text/javascript" src="../vendor/jquery/formvalidator/js/jquery.validationEngine-zh_CN.js"></script>
    <!--datetimepicker-->
    <link type="text/css" href="../dist/css/timepicker/jquery-ui-1.11.4.css" rel="stylesheet" />
    <link type="text/css" href="../dist/css/timepicker/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script type="text/javascript" src="../vendor/jquery/timepicker/jquery-ui-1.11.4.js"></script>
    <script type="text/javascript" src="../vendor/jquery/timepicker/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="../vendor/jquery/timepicker/jquery-ui-timepicker-zh-CN.js"></script>
    <!--自定义css-->
    <link rel="stylesheet" type="text/css" href="../dist/css/index.css">
</head>
<body>
<div class="container">
    <div class="row">
        <section>
            <div class="page-header">
                <h1>Bootstrap plugin</h1>
            </div>

            <div class="col-lg-12">
                <form id="defaultForm" method="post"  class="form-horizontal">
                    <fieldset>

                        <div class="form-group">
                            <div class="col-lg-6 group">
                                <label class="col-lg-2 control-label">用户名</label>
                                <div class="col-lg-10">

                                    <input  id="name1" type="text" class="form-control validate[required,maxsize[15]]"  />
                                </div>
                            </div>
                            <div class="col-lg-6 group">
                                <label class="col-lg-2 control-label">曾用名</label>
                                <div class="col-lg-10">
                                    <!--<input name="name" id="name" value="${rfidreader.name}" type="text" class="dfinput validate[required]" size="30" />-->
                                    <input  id="name2" type="text" class="form-control validate[required]"  />
                                </div>
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">时间</label>
                            <div class="col-lg-5">
                                <input type="text" name="datetime" class="form-control ui_timepicker validate[required]">
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">国家</label>
                            <div class="col-lg-5">
                                <select class="form-control validate[required[]]" name="country">
                                    <option value="">-- Select a country --</option>
                                    <option value="fr">France</option>
                                    <option value="de">Germany</option>
                                    <option value="it">Italy</option>
                                    <option value="jp">Japan</option>
                                    <option value="ru">Russia</option>
                                    <option value="gb">United Kingdom</option>
                                    <option value="us">United State</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">性别</label>
                            <div class="col-lg-5 language">
                                <!--<div class="validate[required[]]">-->
                                    <!--<div class="radio-inline col-lg-1">-->
                                        <input type="radio"  id="input1" name="man" class="validate[required]"/>
                                        <label for="input1">男</label>
                                    <!--</div>-->
                                    <!--<div class="radio-inline col-lg-1">-->
                                        <input type="radio"  id="input2" name="man" class="validate[required]"/>
                                        <label for="input2">女</label>
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">邮件地址</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]" name="email" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">网址</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]" name="website" placeholder="http://" />
                            </div>
                        </div>


                        <div class="form-group group">
                            <label class="col-lg-3 control-label">电话号码</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control validate[required]" name="phoneNumberUK" />
                            </div>
                        </div>

                        <!--<div class="form-group">-->
                            <!--<label class="col-lg-3 control-label control_group">Hex, RGB, HSL, Keyword color</label>-->
                            <!--<div class="col-lg-3">-->
                                <!--<input type="text" class="form-control validate[required[]]" name="color" />-->
                            <!--</div>-->
                        <!--</div>-->

                        <!--<div class="form-group">-->
                            <!--<label class="col-lg-3 control-label">All colors</label>-->
                            <!--<div class="col-lg-3">-->
                                <!--<input type="text" class="form-control" name="colorAll" />-->
                            <!--</div>-->
                        <!--</div>-->

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">邮政编码</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control validate[required[]]" name="zipCode" />
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="form-group group">
                            <label class="col-lg-3 control-label">密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control validate[required,NummaxSize[6],NumminSize[6]]" name="password" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">再次确认密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control validate[required,NummaxSize[6],NumminSize[6]]" name="confirmPassword" />
                            </div>
                        </div>
                    </fieldset>
                    

                    <fieldset>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">年龄</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control validate[required]" name="ages" />
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">语言</label>
                            <div class="col-lg-5 language">
                                <!--<div class="validate[required]">-->
                                    <!--<div class="checkbox">-->

                                            <input type="checkbox" value="english" name="label" id="label1" class="validate[required,minCheckbox[2]]"/>
                                            <label for="label1">English</label>
                                    <!--</div>-->
                                    <!--<div class="checkbox">-->

                                            <input type="checkbox"  value="french" name="label" id="label2" class="validate[required,minCheckbox[2]]"/>
                                            <label for="label2">French</label>
                                    <!--</div>-->
                                    <!--<div class="checkbox">-->

                                            <input type="checkbox"  value="german" name="label" id="label3" class="validate[required,minCheckbox[2]]"/>
                                            <label for="label3">German</label>
                                    <!--</div>-->
                                    <!--<div class="checkbox">-->

                                            <input type="checkbox" value="russian" name="label" id="label4" class="validate[required,minCheckbox[2]]"/>
                                            <label for="label4">Russian</label>
                                    <!--</div>-->
                                    <!--<div class="checkbox">-->

                                            <input type="checkbox"  value="other" name="label" id="label5" class="validate[required,minCheckbox[2]]"/>
                                            <label for="label5">Other</label>
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>

                        <div class="form-group group">
                            <label class="col-lg-3 control-label">详情</label>
                            <div class="col-lg-5 language">
                                <textarea name="" id="" rows="10" class="form-control textarea validate[required]" placeholder='请留言'></textarea>
                            </div>
                        </div>
                    </fieldset>

                    <div class="form-group group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <input type="button" class="btn btn-primary" id="button" value="Submit">
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>



</div>



<!--<form id="defaultForm">-->
    <!--<div style="position: relative">-->
            <!--<input type="radio" name="nan" class="validate[required]">男-->
            <!--<input type="radio" name="nan" class="validate[required]">女-->
    <!--</div>-->
    <!--&lt;!&ndash;<input type="radio"  id="input1" class="validate[required[]]"/>&ndash;&gt;-->
    <!--&lt;!&ndash;<label for="input1">男</label>&ndash;&gt;-->
    <!--&lt;!&ndash;<input type="radio"  id="input2" class="validate[required[]]"/>&ndash;&gt;-->
    <!--&lt;!&ndash;<label for="input1">女</label>&ndash;&gt;-->
<!--</form>-->
<!--<input type="button" id="button" value="提交">-->
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $("#defaultForm").validationEngine({
            validationEventTriggers:"blur",  // 触发的事件
            // validationEventTriggers:"keyup
            // blur",
            maxErrorsPerField:1,
            inlineValidation: true,// 是否即时验证，false为提交表单时验证,默认true
            success :  false,// 为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false
            promptPosition: "bottomLeft"// 提示所在的位置，topLeft, topRight, bottomLeft,
            // centerRight, bottomRight
//			         failure : function() { alert("验证失败，请检查。"); },//验证失败时调用的函数
//			         success : function() { callSuccessFunction() }//验证通过时调用的函数
        });

        $(".ui_timepicker").datetimepicker({
            defaultDate: $('.ui_timepicker').val(),
            dateFormat: "yy-mm-dd",
            showSecond: true,
            timeFormat: 'hh:mm:ss',
            stepHour: 1,
            stepMinute: 1,
            stepSecond: 1
        })
    });
</script>
<script type="text/javascript">
//    var length=$(".form-group").length;
//    for(var i=0;i<length;i++){
//        var height=$(".form-group").eq(i).height();
//        $(".form-group").eq(i).css({height:height+20});
//    }
//$(".form-group").css({marginBottom:"25px"});
    $("#button").on("click",function(){
        if(!$("#defaultForm").validationEngine("validate")){
            return;
        }else{

        }
    })
</script>
</html>